<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	//http://localhost:8080/logistics/
%>
<html>
<head>
<!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>

<script type="text/javascript">
	/* zTree的设置对象 */
	var setting = {
		data : {
			/* 支持简单json格式数据 */
			simpleData : {
				enable : true,
				/* zTree数据的id名称 */
				idKey: "permissionId",
				/* zTree数据的父id名称 */
				pIdKey: "parentId",
			}
		},
		/* 是否支持复选框 */
		check : {
			enable : true
		},
		/* 异步加载数据 */
		async : {
			enable : true,
			url : "permission/getAllPermission.do",
			/* 对加载的数据进行预处理 */
			dataFilter: ajaxDataFilter,
			
		},
		/* 异步加载数据以后回调 */
		callback: {
			onAsyncSuccess: zTreeOnAsyncSuccess
		}
	};
	/* 异步加载数据成功以后回调 */
	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		//获取zTree树对象
		var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
	 /*
	 	zTree数据回显思路
	 	
	 	1，将后台共享的角色权限id字符串切割成数组
	 	var  permissionIds = "49,1,13,15,16,17,67,68,69,70,71,12,22,23,24,25";
	 	
	 	2,循环数组，得到每一个id值，zTree有一个可以通过节点的属性值获取节点的方法
	 		调用zTree 通过 permissionId 属性的值获取对应节点的方法
	 		
	 	2.1让其节点选中即可
	 */
		var  permissionIds = "58,57,59,60,61";
		
	 	var permissionIdsArr =  permissionIds.split(",");
		
	 	console.log(permissionIdsArr);
	    for(var i = 0; i<permissionIdsArr.length; i++){
	    	//获取每一个权限id值
	    	var permissionId = permissionIdsArr[i];
	    	
	    	//获取 permissionId 属性对应的值的节点
	    	var node = treeObj.getNodeByParam("permissionId", permissionId, null);
	    	
	    	console.log(node);
	    	//让其节点选中即可
	    	treeObj.checkNode(node, true, false);
	    }
	};
	
	
	/* 数据预处理函数 */
	function ajaxDataFilter(treeId, parentNode, responseData) {
   
		if (responseData) {
			for (var i = 0; i < responseData.length; i++) {
					/* 为每一行节点数据添加一个open属性，让其节点展开 */	
					responseData[i].open =true;
					//禁用url
					responseData[i].url =null;
				}
		}
		return responseData;
	};
	
	$(function() {
		//初始化zTree
		$.fn.zTree.init($("#permissionTree"), setting);
	});
	
	
	//获取zTree选中的数据
	function getCkeckedData(){
		
		//1.获取zTree树对象： 注意，此处不是id选择器，没有# 
		var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
		//2.获取选中的节点
		var nodes = treeObj.getCheckedNodes(true);
		console.log(nodes);
		
		//3.循环节点，获取每一个节点的id，并且以逗号分隔拼接成字符串
		
		var permissionIdsArr = [];
		for(var i = 0 ;i<nodes.length;i++){
			//获取单个节点
			var node = nodes[i];
			//将节点的权限id获取添加数据
			permissionIdsArr.push(node.permissionId);
		}
		
		//将数组转换成字符串
		var permissionIds = permissionIdsArr.toString(); //1,2,4,6,8...
		
		//var permissionIds = permissionIdsArr.join("$"); //1$2$4$6$8...
		console.log(permissionIds);
	
		
	}
	
</script>


</head>
<body>
	回显数据
	<button onclick="getCkeckedData()">获取zTree节点选中的数据</button>

	<ul id="permissionTree" class="ztree"></ul>

</body>
</html>